<template>
  <div class="contentScorll">
    <div v-for="(item, index) in tableValue" :key="item.id" :ref="(el) => getDivDom(el, item)">
      <template v-if="item.totalCount">
        <div class="contentTitle">
          <span class="titleName"> {{ item.name + '(' + item.totalCount + ')' }}</span>
          <el-text class="titleButton" @click="showAndHide(index)">
            {{ item.isShow ? '收起' : '展开' }}
            <el-icon size="12" color="#a9a9a9" v-if="item.isShow">
              <ArrowUp />
            </el-icon>
            <el-icon size="12" color="#a9a9a9" v-else>
              <ArrowUp />
            </el-icon>
          </el-text>
        </div>
        <div class="contentTable" v-if="item.isShow">
          <transition>
            <component :is="getComponentName(value.field)" :value="item" :cid="cid" />
          </transition>
        </div>
      </template>
    </div>
    <div v-if="numberCount == '0'" class="emptyBox">
      <el-empty description="暂无数据" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import { nodePageGet } from '@/api/ent/advanceSearch/index'
import BaseInfo from './TableComponets/baseInfo/index.vue'
import CertInfo from './TableComponets/certInfo/index.vue'
import CompanyInfo from './TableComponets/companyInfo/index.vue'
import JobInfo from './TableComponets/jobInfo/index.vue'
import RiskInfo from './TableComponets/riskInfo/index.vue'
import TenderTnfo from './TableComponets/tenderInfo/index.vue'

const props = defineProps({
  value: Object,
  cid: String,
  numberCount: String,
  listMap: Object
})
const tableValue = ref([])
const loading = ref(false)
const divDomList = ref(new Map())
watch(
  () => props,
  (val) => {
    const value = JSON.parse(JSON.stringify(props.value.detailMenuVO))
    tableValue.value = mergeValues(value, props.listMap)
  },
  { deep: true }
)
const getComponentName = (field) => {
  // 基本信息
  if (field === 'baseInfo') {
    return BaseInfo
    // 工商信息
  } else if (field === 'companyInfo') {
    return CompanyInfo
    // 知识产权
  } else if (field === 'certInfo') {
    return CertInfo
    // 招标投标
  } else if (field === 'tenderInfo') {
    return TenderTnfo
    // 招聘信息
  } else if (field === 'jobInfo') {
    return JobInfo
    // 风险信息
  } else if (field === 'riskInfo') {
    return RiskInfo
  }
}
const mergeValues = (arrayA, objectB) => {
  arrayA.forEach((itemA) => {
    let key = itemA.field
    if (objectB[key]) {
      Object.assign(itemA, objectB[key], { isShow: true })
    }
  })
  return arrayA
}

const showAndHide = (index) => {
  tableValue.value[index].isShow = !tableValue.value[index].isShow
}

const getDivDom = (el, item) => {
  if (el) {
    divDomList.value.set(item.id, el)
  }
}

const scrollToItem = (index) => {
  divDomList.value.get(index).scrollIntoView()
}
defineExpose({ scrollToItem })
</script>
<style lang="scss" scoped>
.contentScorll {
  background-color: #fff;
  padding: 20px;
  .contentTitle {
    padding: 15px;
    background-color: #f5f7f9;
    margin-bottom: 20px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .titleButton {
      font-size: 14px;
      color: #a9a9a9;
      cursor: pointer;
    }
    .titleName {
      font-size: 12px;
      position: relative;
      color: #333;
      &::before {
        content: '';
        position: absolute;
        left: -12px;
        top: 0;
        bottom: 0;
        width: 3px;
        height: 20px;
        background-color: #5b83fd;
      }
    }
  }
  .contentTable {
    padding-bottom: 20px;
  }
  .emptyBox {
    padding-top: 20px;
  }
}
</style>
